<template>
	<view class="mainBox">
		<view class="pawFrom">
			<div class="inpBox">
				<div class="drop-down">
					<uv-input placeholder="邮箱账号" v-model="values">
						<!-- vue3模式下必须使用v-slot:suffix -->
						<template v-slot:suffix>
							<uv-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取哈哈哈"></uv-code>
							<uv-button @click="getCode" :text="tips" type="success" size="mini"></uv-button>
						</template>
					</uv-input>
				</div>
			</div>
			<div class="inpBox">
				<div class="drop-down">
					<uv-input placeholder="请输入内容" border="surround" v-model="value" @change="change"></uv-input>
				</div>
			</div>

		</view>

		<button @click="goToNext" class="nextBtnm">下一步</button>
	</view>
</template>

<script>
	import {
		toast
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	export default {
		data() {
			return {
				tips: '',
				values: "",
				value: ''
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode && this.values != "") {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();

						this.value = Math.floor(1000 + Math.random() * 9000)


					}, 2000);
				} else if (this.values == "") {
					toast('请输入账号');
				} else {
					toast('倒计时结束后发送');
				}
			},
			change(e) {
				console.log('change', e);
			},
			goToNext() {
				if (this.value != "" && this.values != "") {
					uni.navigateTo({
						url: "/pages/ChangePaw/ChangePaw"
					})
				} else {
					toast('请填写完整');
				}

			}
		}
	}
</script>

<style>
	.mainBox {
		width: 750rpx;
		height: 100vh;
		background-image: url('https://dwz.cn/PmYG89wi');
		background-size: cover;
		background-position: center;


	}

	.pawFrom {
		width: 558rpx;
		height: 300rpx;
		background-color: aliceblue;
		border-radius: 15rpx;
		position: absolute;
		left: 10%;
		top: 22%;
		padding: 20rpx;
	}

	.inpBox {
		margin-bottom: 40rpx;
		margin-top: 30rpx;
	}

	.nextBtnm {
		width: 580rpx;
		height: 100rpx;
		position: absolute;
		left: 12%;
		bottom: 10%;
		padding: 20rpx;
		color: #3087ea;
	}
</style>